<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tooltip {
            max-width: 230px;
            box-sizing: border-box;
            border: 1px solid #ea6f5a;
            background-color: #fff;
            padding: 5px 10px 5px 36px;
            border-radius: 4px;
            position: absolute;
            transform: translate(0, -50%);
            transition: opacity .3s linear;
            font-size:14px;
            font-weight: 400;
            color: #333;
        }
        .tooltip span {
            font-size:16px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top:50%;
            left: 10px;
            transform: translate(0, -50%);
            text-align: center;
            color: #ea6f5a;
        }
        .tooltip::before{
            content: '';
            position: absolute;
            left: 0;
            top:50%;
            width: 10px;
            height: 10px;
            border-left: 1px solid #ea6f5a;
            border-bottom: 1px solid #ea6f5a;
            background: #fff;
            transform: translate(-60%,-50%) rotate(45deg);
        }
        .box {
            width: 300px;
            height: 50px;
            background: red;
            margin: 200px auto;
            position: relative;
        }
    </style>
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
</head>
<body>
    <div class="box"></div>
<script>




    var Tooltip = function(dom,message){
        var domInfo = dom.getBoundingClientRect()
        var domWidth = domInfo.width
        var domHeight = domInfo.height
        var domLeft = domInfo.left
        var domTop = domInfo.top
        var targetLeft = domLeft + domWidth + 20
        var targetTop = domHeight / 2 + domTop
        var target = document.createElement('div')
        target.className = 'tooltip'
        target.style.left = targetLeft + 'px'
        target.style.top = targetTop + 'px'
        target.innerHTML = message
        var span = document.createElement('span')
        var i = document.createElement('i')
        i.className = 'fa fa-exclamation-triangle'
        span.appendChild(i)
        target.appendChild(span)
        var body = document.querySelector('body')
        body.appendChild(target)

        dom.addEventListener('click',function(){
            target.style.opacity = 0
            console.log(1)
        })
    }

    !(function () {
        var dom = document.querySelector('.box')
        var message = '昵称打发萨福卅分撒旦法是地方爱是地方撒的发生大'
        Tooltip(dom,message)
        var span = document.createElement('span')
        span.innerHTML = message
        var body = document.querySelector('body')
        body.appendChild(span)
        console.log(span.offsetWidth)
        body.removeChild(span)
    })()
</script>
</body>
</html>